import React from 'react';

const About = () => {
  return (
    <div className="container mx-auto px-4 py-10">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold mb-6 text-gray-800 dark:text-gray-200">关于我们</h1>
        
        <div className="prose prose-lg dark:prose-invert max-w-none">
          <p>
            欢迎来到Java程序员的博客天地，这是一个专为Java开发者设计的技术社区和知识分享平台。
            我们致力于为Java开发者提供一个分享知识、交流经验、讨论技术的平台。
          </p>
          
          <h2>我们的使命</h2>
          <p>
            我们的使命是连接所有Java开发者，共同构建一个活跃的技术社区，让知识分享变得更加简单和有价值。
            我们相信，通过开放和协作，每个人都能够不断成长和进步。
          </p>
          
          <h2>我们的愿景</h2>
          <p>
            成为Java技术领域最具影响力的内容平台，为每一位Java开发者提供专业、高质量的技术内容和社区支持。
          </p>
          
          <h2>核心价值观</h2>
          <ul>
            <li><strong>专业性</strong>：我们注重内容的专业性和准确性，确保为用户提供有价值的技术信息。</li>
            <li><strong>开放性</strong>：我们鼓励多元化的技术观点和讨论，欢迎不同背景的开发者参与。</li>
            <li><strong>创新性</strong>：我们不断探索新的技术和方法，推动Java技术的发展和应用。</li>
            <li><strong>社区性</strong>：我们重视用户体验和社区互动，致力于构建一个友好、互助的开发者社区。</li>
          </ul>
          
          <h2>技术栈</h2>
          <p>
            我们的平台采用现代化的技术栈构建：
          </p>
          <ul>
            <li><strong>前端</strong>：React.js, Tailwind CSS</li>
            <li><strong>后端</strong>：Spring Boot, Spring Security, Spring Data JPA</li>
            <li><strong>数据库</strong>：MySQL</li>
            <li><strong>部署</strong>：Docker, CI/CD</li>
          </ul>
          
          <h2>联系我们</h2>
          <p>
            如果您有任何问题、建议或合作意向，欢迎通过以下方式联系我们：
          </p>
          <ul>
            <li>邮箱：contact@javablog.com</li>
            <li>GitHub：<a href="https://github.com/javablog" className="text-blue-600 dark:text-blue-400 hover:underline">github.com/javablog</a></li>
          </ul>
          
          <p className="mt-8 text-lg">
            感谢您的支持和关注！
          </p>
        </div>
      </div>
    </div>
  );
};

export default About; 